<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>core-list: divider</title>
  <meta name="viewport" content="width=device-width">
  <script src="../platform/platform.js"></script>
  <link rel="import" href="core-list.html">
  <style>
    html, body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      height: 100%;
      margin: 0;
    }
    
    list-test {
      display: block;
      height: 100%;
      margin: 0 auto;
    }

    .stuff {
      min-height: 60px;
      background: red !important;
      border-bottom: 1px solid black;
    }
  </style>
</head>
<body>

<list-test></list-test>

<polymer-element name="list-test">
<template>
  <style>
    core-list {
      height: 100%;
    }

    .item {
      box-sizing: border-box;
      height: 80px;
      border-bottom: 1px solid #ddd;
      cursor: default;
      overflow: hidden;
    }

    .selected {
      background: silver;
    }

    .message {
      padding-left: 77px;
      line-height: 167%;
      background-repeat: no-repeat;
      background-position: 10px 10px;
      background-size: 60px;
    }
    
    .from {
      display: inline;
      font-weight: bold;
    }
    
    .timestamp {
      margin-left: 10px;
      font-size: 12px;
      opacity: 0.8;
    }
    
    .body {
      font-size: 12px;
    }

    .hidden {
      display: none;
    }

    .divider {
      height: 80px;
      box-sizing: border-box;
      box-shadow: inset 0 8px 40px 0 rgba(0, 0, 0, 0.1);
      text-transform: uppercase;
      padding: 36px 20px 0;
      font-size: 40px;
    }

    .main {
      padding: 4px;
      background-color: white;
    }
  </style>
  <core-list id="list" data="{{data}}" height="80">
    <template repeat>
      <div class="item {{ {selected: selected} | tokenList }}">
        <div class="divider {{ {hidden: !divider} |tokenList}}">{{divider}}</div>
        <div class="message {{ {hidden: divider} |tokenList}}" style="background-image: url(images/{{index % 4}}.png);">
          <span class="from">{{name}}</span>
          <span class="timestamp">{{time}}</span>
          <div class="subject">Infinite List. {{index}}</div>
          <div class="body">{{details}}</div>
        </div>
      </div>
    </template>
  </core-list>

</template>
<script>
(function() {
  var strings = [
    "PARKOUR!",
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
  ];

  var namegen = {
    generateString: function(inLength) {
      var s = '';
      for (var i=0; i<inLength; i++) {
        s += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
      }
      return s;
    },
    generateName: function(inMin, inMax) {
      return this.generateString(Math.floor(Math.random() * (inMax - inMin + 1) + inMin));
    }
  };

  Polymer('list-test', {
    count: 1000,
    ready: function() {
      this.data = this.generateData();
    },
    generateData: function() {
      var names = [], data = [];
      for (var i=0; i<this.count; i++) {
        names.push(namegen.generateName(4, 8));
      }
      names.sort();
      for (var i=0, o; i<this.count; i++) {
        var name = names[i];
        var divider = name.charAt(0);
        if (divider === (names[i-1] || '').charAt(0)) {
          divider = null;
        }
        o = {
          index: i,
          name: name,
          divider: divider,
          details: strings[i % 3],
          time: '8:29pm'
        };
        data.push(o);
        if (divider) {
          o = Object.create(o);
          o.divider = false;
          data.push(o);
        }
      }
      return data;
    },
    tapAction: function(e) {
      console.log('tap', e);
    }
  });
})();  
</script>
</polymer-element>

</body>
</html>
